<template>
	<view class="page">
		<template v-if="isLogin">

			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>

			<template v-else>
				<view class="body">
					<view class="map-area" style="margin-bottom: 0;">
						<map id="map" ref="map" :markers="markers" style="width: 100%;"></map>
					</view>
					<view class="data-list">
						<view class="item">
							<view class="label">天气情况</view>
							<text class="val">{{detail.weather===''?'--':detail.weather}}</text>
						</view>
						<view class="item">
							<view class="label">空气温度(°C)</view>
							<text class="val">{{detail.temperature===''?'--':detail.temperature}}</text>
						</view>
						<view class="item">
							<view class="label">空气湿度(%)</view>
							<text class="val">{{detail.humidity===''?'--':detail.humidity}}</text>
						</view>
						<view class="item">
							<view class="label">海拔</view>
							<text class="val">{{detail.altitude===''?'--':parseFloat(detail.altitude).toFixed(2)}}</text>
						</view>
					</view>
					<view class="mod-grid m-t2">
						<view class="hd">设备信息</view>
						<view class="con">
							<view class="detail-wrap">
								<view class="detail-item">
									<view class="label">设备编号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.device_number}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">生育期：</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.birth_time}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">取样丛数：</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.qycs}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">品种：</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.breed}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">经纬度：</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.gcj02_lat+'，'+detail.gcj02_lng}}</view>
											<!-- <input type="text" class="inp" v-model="detail.location" disabled placeholder="输入经纬度" /> -->
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">作业人员</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.scan_user}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">作业时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.scan_time}}</view>
										</view>
									</view>
								</view>
								<!-- <view class="detail-item">
										<view class="label">设备类型</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{detail.name||'-'}}</view>
											</view>
										</view>
									</view> -->
								<!-- <view class="detail-item">
									<view class="label">设备型号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.model_number || '-' }}</view>
										</view>
									</view>
								</view> -->
								<!-- <view class="detail-item">
									<view class="label">地址</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.address || '-' }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">备注</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.remark || '-' }}</view>
										</view>
									</view>
								</view> -->
							</view>
						</view>
					</view>

					<!-- <view class="mod-grid">
						<view class="hd">上传实景图片</view>
						<view class="form-wrap upload-pic-wrap">
							<template>
								<view class="form-upload-pic">
									<template>
										<view class="img-item" v-for="(item, index) in installParams.pic" :key="index">
											<image src="@/static/images/filter_bg.png" mode="widthFix">
											</image>
											<view class="img-wrap" @click="previewPic(index, 2)">
												<image class="img" :src="item.url" mode="widthFix"></image>
											</view>
											<view class="del-icon" @click="delPic(index, 2)">
												<view class="iconfont">&#xe65c;</view>
											</view>
										</view>
									</template>
									<view v-if="installParams.pic.length < 5" class="img-item add-btn"
										@click="uploadImage(2)">
										<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="upload-pic-tips">设备安装实景图片(最多5张)</view>
							</template>
						</view>
					</view> -->

				</view>

				<!-- <view class="share-btn" @click="shareAddress">
					<view class="icon">
						<image src="@/static/images/share_address_icon.png" mode="widthFix"></image>
					</view>
				</view> -->
			</template>


		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config.js'
	import {
		previewImage,
		d2Dms
	} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				isLogin: false,
				loadingState: {
					default: true,
					loading: false,
					compelted: false
				},
				params: {},
				detail: {},
				http_request_url: HTTP_REQUEST_URL,
				markers: [],
			}
		},
		filters: {
			toFixedN: function(val, n) {
				val = Number(val);
				return val.toFixed(n);
			}
		},
		onShow() {

		},
		async onLoad(params) {
			this.params = JSON.parse(decodeURIComponent(params.data)) || {};
			console.log('params', JSON.stringify(this.params));
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getfkDataDetail();
			}
		},
		methods: {

			// 获取详情
			getfkDataDetail: async function() {
				let res = await this.$api.zncp_api.deviceinfo({
					id: this.params.scan_id,
					appid: this.appid,
					token: this.token
				})
				console.log('res', res);
				if (res.data.ret == 0) {
					this.loadingState.default = false;

					if (res.data.data.gcj02_lat && res.data.data.gcj02_lng) {
						let lat = d2Dms(parseFloat(res.data.data.gcj02_lat).toFixed(6));
						let lng = d2Dms(parseFloat(res.data.data.gcj02_lng).toFixed(6));
						res.data.data.local = lat + '，' + lng;
					}

					this.detail = res.data.data;
					this.markers.push({
						id: 0,
						latitude: parseFloat(res.data.data.latitude),
						longitude: parseFloat(res.data.data.longitude),
						iconPath: '/static/images/local_icon.png',
						width: 30,
						height: 30
					})
				}
			},

			// 图片预览
			preview: function(path) {
				let img_list = [];
				// this.detail.pcFiles.forEach(item => {
				// 	img_list.push(this.http_request_url + '/image/image?path=' + item.file_path)
				// })
				previewImage({
					data: [`https://api.honghuoyi.com/image/image?path=${path}&ftype=d`],
					index: 0
				})
			},

			beforeDelPhoto(id) {
				uni.showModal({
					title: '提示',
					content: '删除后数据不可恢复,是否确定?',
					success: res => {
						if (res.confirm) {
							this.delphoto(id);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			async delphoto(id) {
				let res = await this.$api.znjc_api.delphoto({
					id: this.params.id
				})
				console.log('del', res);
				if (res.data.ret == 0) {
					// this.getDevPhoto();
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('update', { update: 1 });
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						mask: true,
						success() {
							console.log('succ');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 300)
						}
					})
				} else {
					uni.showToast({
						icon: 'error',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
				}
			},

			// 打开导航
			openNavigation: function() {
				uni.openLocation({
					latitude: parseFloat(this.detail.gcj02_lat),
					longitude: parseFloat(this.detail.gcj02_lng),
					name: this.detail.address,
					address: this.detail.address,
					scale: 18
				})
			},

			// //删除数据
			// deleteData: function() {
			// 	let _this = this;
			// 	uni.showModal({
			// 		content: '确认删除该条数据？',
			// 		success: async function(res) {
			// 			if (res.confirm) {
			// 				let del_res = await _this.$api.yfk_api.deleteData({
			// 					id: _this.id,
			// 					status: 0
			// 				})
			// 				if (del_res.data.ret == 0) {
			// 					uni.showToast({
			// 						icon: "success",
			// 						title: '删除成功',
			// 						mask: true,
			// 						success() {
			// 							_this.$store.commit('UPDATE_FK_LIST', 1); // 状态变化 更新列表
			// 							setTimeout(() => {
			// 								uni.navigateBack({
			// 									delta: 1
			// 								})
			// 							}, 300)
			// 						}
			// 					})
			// 				}
			// 			}
			// 		}
			// 	})
			// },

			// 分享位置
			shareAddress: function() {
				uni.share({
					provider: 'weixin',
					type: 0,
					title: this.detail.address,
					href: `http://www.honghuoyi.com/plus/m_map.php?addr=${this.detail.address}&longitude=${this.detail.gcj02_lng}&latitude=${this.detail.gcj02_lat}`,
					imageUrl: '../../static/images/share_area_icon.png',
					scene: 'WXSceneSession', // WXSceneTimeline  朋友圈    WXSceneSession 聊天界面
					summary: '',
					success: function(res) {},
					fail(err) {
						if (err.code == -8) {
							// 未安装应用
							uni.showModal({
								content: '未检测到客户端，请先下载安装客户端',
								mask: true,
								confirmText: '我知道了',
								showCancel: false,
								success(m_res) {

								}
							})
						}
					}
				})
			}

		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.map {
		height: 300rpx;
		background: #ccc;
	}

	.data-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff;
		margin: 0 auto 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx dashed #ddd;

		.item {
			width: 22%;
			font-size: 28rpx;
			text-align: center;

			.label {
				margin-bottom: 10rpx;
				color: #999;
			}
		}
	}

	.mod-grid {
		margin-bottom: 20rpx;

		.hd {
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.upload-pic-wrap {
		padding-top: 10rpx;
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.form-upload-pic {
		margin: 20rpx 0 0 20rpx;
	}


	.share-btn {
		position: fixed;
		right: 20rpx;
		bottom: 250rpx;
		width: 120rpx;
		height: 120rpx;

		image {
			width: 100%;
		}
	}
</style>